<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>每时段用户行为人次统计</title>
  <script src="lib/echarts.min.js"></script>
  <script src="lib/chalk.js"></script>
  <script src="lib/jquery.min.js"></script>
</head>

<body>
  <div id="mCharts1" style="width: 650px; float: right;height:380px"></div>
  <div id="mCharts2" style="width: 650px;  height:380px"></div>
  <div id="mCharts3" style="width: 650px; float: right;height:380px"></div>
  <div id="mCharts4" style="width: 650px;  height:380px"></div>
  <script>
    var mCharts1 = echarts.init(document.getElementById("mCharts1"))
    var mCharts2 = echarts.init(document.getElementById("mCharts2"))
    var mCharts3 = echarts.init(document.getElementById("mCharts3"))
    var mCharts4 = echarts.init(document.getElementById("mCharts4"))


    mCharts1.showLoading() // 在获取数据之前, 显示加载动画
    mCharts2.showLoading()
    mCharts3.showLoading()
    mCharts4.showLoading()
    var option1 = {
      dataZoom: [ // 控制区域缩放效果的实现
        {
          type: 'inside',//inside代表依靠鼠标滚轮
          xAxisIndex: 0
        },
        {
          type: 'inside',
          start: 0, // 渲染完成后, 数据筛选的初始值, 百分比
          end: 80 // 渲染完成后, 数据筛选的结束值, 百分比
        }
      ],          
      animation: true,  // 控制动画是否开启
      animationDuration: function(arg){
        console.log(arg)
        return 2000 * arg
      },
      animationEasing: 'bounceOut', // 缓动动画
      animationThreshold: 7, // 动画元素的阈值
      title: {
          text: '▎每时段关注人次统计',
          left: 20,
          top: 20
        },
      grid: {
          top: '20%',
          left: '3%',
          right: '6%',
          bottom: '3%',
          containLabel: true // 距离是包含坐标轴上的文字
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'line',
            z: 0,
            lineStyle: {
              width: 33,
              color: '#2D3443'
            }
          }
        },

      xAxis: {
        type: 'category',
        axisLabel: {
          formatter: '{value} 时'
        },
       data: []
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: '关注人次（/人）',
          type: 'line',
          data: [],
          dataSort: 'ascending',
          markPoint: {
            data: [
              {
                type: 'max', name: '最大值'
              },
              {
                type: 'min', name: '最小值'
              }
            ]
          },
          label: {
            show: true,
            rotate: 60,
            position: 'right',
              textStyle: {
                color: 'white'
              }
          },
          
          barWidth: '30%',
          itemStyle: {
            barBorderRadius: [33, 33 , 0, 0],
            color:  new echarts.graphic.LinearGradient(0, 1, 0, 0, [
              {
                // 百分之0状态之下的颜色值
                  offset: 0,
                  color: '#00ffff'
                },
                // 百分之100状态之下的颜色值
                {
                  offset: 1,
                  color: '#ff00ff'
                }
              ])
          }
        }
      ]
    };
    var option2 = {
      dataZoom: [ // 控制区域缩放效果的实现
        {
          type: 'inside',//inside代表依靠鼠标滚轮
          xAxisIndex: 0
        },
        {
          type: 'inside',
          start: 0, // 渲染完成后, 数据筛选的初始值, 百分比
          end: 80 // 渲染完成后, 数据筛选的结束值, 百分比
        }
      ],          
      animation: true,  // 控制动画是否开启
      animationDuration: function(arg){
        console.log(arg)
        return 2000 * arg
      },
      animationEasing: 'bounceOut', // 缓动动画
      animationThreshold: 7, // 动画元素的阈值
      title: {
          text: '▎每时段加购人次统计',
          left: 20,
          top: 20
        },
      grid: {
          top: '20%',
          left: '3%',
          right: '6%',
          bottom: '3%',
          containLabel: true // 距离是包含坐标轴上的文字
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'line',
            z: 0,
            lineStyle: {
              width: 33,
              color: '#2D3443'
            }
          }
        },

      xAxis: {
        type: 'category',
        axisLabel: {
          formatter: '{value} 时'
        },
       data: []
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: '加购人次（/人）',
          type: 'line',
          data: [],
          dataSort: 'ascending',
          markPoint: {
            data: [
              {
                type: 'max', name: '最大值'
              },
              {
                type: 'min', name: '最小值'
              }
            ]
          },
          label: {
            show: true,
            rotate: 60,
            position: 'right',
              textStyle: {
                color: 'white'
              }
          },
          
          barWidth: '30%',
          itemStyle: {
            barBorderRadius: [33, 33 , 0, 0],
            color:  new echarts.graphic.LinearGradient(0, 1, 0, 0, [
              {
                // 百分之0状态之下的颜色值
                  offset: 0,
                  color: '#00ff00'
                },
                // 百分之100状态之下的颜色值
                {
                  offset: 1,
                  color: '#ff1493'
                }
              ])
          }
        }
      ]
    };
    var option3 = {
      dataZoom: [ // 控制区域缩放效果的实现
        {
          type: 'inside',//inside代表依靠鼠标滚轮
          xAxisIndex: 0
        },
        {
          type: 'inside',
          start: 0, // 渲染完成后, 数据筛选的初始值, 百分比
          end: 80 // 渲染完成后, 数据筛选的结束值, 百分比
        }
      ],          
      animation: true,  // 控制动画是否开启
      animationDuration: function(arg){
        console.log(arg)
        return 2000 * arg
      },
      animationEasing: 'bounceOut', // 缓动动画
      animationThreshold: 7, // 动画元素的阈值
      title: {
          text: '▎每时段浏览人次统计',
          left: 20,
          top: 20
        },
        
      grid: {
          top: '20%',
          left: '3%',
          right: '6%',
          bottom: '3%',
          containLabel: true // 距离是包含坐标轴上的文字
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'line',
            z: 0,
            lineStyle: {
              width: 33,
              color: '#2D3443'
            }
          }
        },

      xAxis: {
        type: 'category',
        axisLabel: {
          formatter: '{value} 时'
        },
       data: []
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: '浏览人次（/人）',
          type: 'line',
          data: [],
          dataSort: 'ascending',
          markPoint: {
            data: [
              {
                type: 'max', name: '最大值'
              },
              {
                type: 'min', name: '最小值'
              }
            ]
          },
          label: {
            rotate: 60,
            position: 'right',
              textStyle: {
                color: 'white'
              }
          },
          
          barWidth: '30%',
          itemStyle: {
            barBorderRadius: [33, 33 , 0, 0],
            color:  new echarts.graphic.LinearGradient(0, 1, 0, 0, [
              {
                // 百分之0状态之下的颜色值
                  offset: 0,
                  color: '#37A2FF'
                },
                // 百分之100状态之下的颜色值
                {
                  offset: 1,
                  color: '#FF0087'
                }
              ])
          }
        }
      ]
    };
    var option4 = {
     
     dataZoom: [ // 控制区域缩放效果的实现
       {
         type: 'inside',//inside代表依靠鼠标滚轮
         xAxisIndex: 0
       },
       {
         type: 'inside',
         start: 0, // 渲染完成后, 数据筛选的初始值, 百分比
         end: 80 // 渲染完成后, 数据筛选的结束值, 百分比
       }
     ],          
     animation: true,  // 控制动画是否开启
     animationDuration: function(arg){
       console.log(arg)
       return 2000 * arg
     },
     animationEasing: 'bounceOut', // 缓动动画
     animationThreshold: 7, // 动画元素的阈值
     title: {
         text: '▎每时段下单人次统计',
         left: 20,
         top: 20
       },
       
     grid: {
         top: '20%',
         left: '3%',
         right: '6%',
         bottom: '3%',
         containLabel: true // 距离是包含坐标轴上的文字
       },
       tooltip: {
         trigger: 'axis',
         axisPointer: {
           type: 'line',
           z: 0,
           lineStyle: {
             width: 33,
           }
         }
       },

     xAxis: {
       type: 'category',
       axisLabel: {
         formatter: '{value} 时'
       },
      data: []
     },
     yAxis: {
       type: 'value'
     },
     series: [
       {
         name: '下单人次（/人）',
         type: 'line',
         data: [],
         dataSort: 'ascending',
         markPoint: {
           data: [
             {
               type: 'max', name: '最大值'
             },
             {
               type: 'min', name: '最小值'
             }
           ]
         },
         label: {
           show: true,
           rotate: 60,
           position: 'right',
             textStyle: {
               color: 'white'
             }
         },
         
         barWidth: '30%',
         itemStyle: {
           barBorderRadius: [33, 33 , 0, 0],
           color:  new echarts.graphic.LinearGradient(0, 1, 0, 0, [
             {
               // 百分之0状态之下的颜色值
                 offset: 0,
                 color: '#f1c40f'
               },
               // 百分之100状态之下的颜色值
               {
                 offset: 1,
                 color: '#9b59b6'
               }
             ])
         }
       }
     ]
   };
    mCharts1.setOption(option1)
    mCharts2.setOption(option2)
    mCharts3.setOption(option3)
    mCharts4.setOption(option4)
     mCharts1.on('click', function (arg) {
      console.log(arg)
      console.log('click...')
    }) // 对事件进行监听

    mCharts1.off('click') // 解绑click的事件

    mCharts1.on('legendselectchanged', function (arg) {
      console.log(arg)
      console.log('legendselectchanged')
    })
    // 监听window窗口大小变化的事件
    window.onresize = function(){
      // 调用echarts实例对象的resize方法
      mCharts1.resize()
    }
     //使用jQuery的Ajax请求，通过GET方法从"http://10.180.210.100:9898/data3"获取数据，并根据返回的数据更新图表配置。
    $.get("http://127.0.0.1:9898/data3",function(data,status){
      mCharts1.hideLoading() // 当服务器数据获取成功之后, 隐藏加载动画
        mCharts1.setOption(
          {
            xAxis:{
            data:data.map(item => item.name)
          },
          series:[{data: data.map(item => item.value)}]
          }
        )

    })

     mCharts2.on('click', function (arg) {
      console.log(arg)
      console.log('click...')
    }) // 对事件进行监听

    mCharts2.off('click') // 解绑click的事件

    mCharts2.on('legendselectchanged', function (arg) {
      console.log(arg)
      console.log('legendselectchanged')
    })
    // 监听window窗口大小变化的事件
    window.onresize = function(){
      // 调用echarts实例对象的resize方法
      mCharts2.resize()
    }
     //使用jQuery的Ajax请求，通过GET方法从"http://10.180.210.100:9898/data4"获取数据，并根据返回的数据更新图表配置。
    $.get("http://127.0.0.1:9898/data4",function(data,status){
      mCharts2.hideLoading() // 当服务器数据获取成功之后, 隐藏加载动画
        mCharts2.setOption(
          {
            xAxis:{
            data:data.map(item => item.name)
          },
          series:[{data: data.map(item => item.value)}]
          }
        )
    })

    mCharts3.on('click', function (arg) {
      console.log(arg)
      console.log('click...')
    }) // 对事件进行监听

    mCharts3.off('click') // 解绑click的事件
    mCharts3.on('legendselectchanged', function (arg) {
      console.log(arg)
      console.log('legendselectchanged')
    })
    // 监听window窗口大小变化的事件
    window.onresize = function(){
      // 调用echarts实例对象的resize方法
      mCharts3.resize()
    }
     //使用jQuery的Ajax请求，通过GET方法从"http://10.180.210.100:9898/data1"获取数据，并根据返回的数据更新图表配置。
    $.get("http://127.0.0.1:9898/data1",function(data,status){
      mCharts3.hideLoading() // 当服务器数据获取成功之后, 隐藏加载动画
        mCharts3.setOption(
          {
            xAxis:{
            data:data.map(item => item.name)
          },
          series:[{data: data.map(item => item.value)}]
          }
        )
    });

    mCharts4.on('click', function (arg) {
      console.log(arg)
      console.log('click...')
    }) // 对事件进行监听

    mCharts4.off('click') // 解绑click的事件

    mCharts4.on('legendselectchanged', function (arg) {
      console.log(arg)
      console.log('legendselectchanged')
    })
    // 监听window窗口大小变化的事件
    window.onresize = function(){
      // 调用echarts实例对象的resize方法
      mCharts4.resize()
    }
     //使用jQuery的Ajax请求，通过GET方法从"http://10.180.210.100:9898/data2"获取数据，并根据返回的数据更新图表配置。
    $.get("http://127.0.0.1:9898/data2",function(data,status){
        mCharts4.hideLoading() // 当服务器数据获取成功之后, 隐藏加载动画
        mCharts4.setOption(
          {
            xAxis:{
            data:data.map(item => item.name)
          },
          series:[{data: data.map(item => item.value)}]
          }
        )
    });
      


  </script>
</body>

</html>